<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0056)http://enricorossi.org/blog/2012/python_bottle_and_ajax/ -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>python bottle and ajax</title>

<link rel="stylesheet" href="./python bottle and ajax_files/style.css" type="text/css">

<link rel="stylesheet" href="./python bottle and ajax_files/local.css" type="text/css">




<meta name="date" content="Sat Jan 21 16:42:00 CET 2012">

</head>
<body style="">

<div class="page">

<div class="pageheader">
<div class="header">
<span>
<span class="parentlinks">

<a href="http://enricorossi.org/">enricorossi.org</a>/ 

<a href="http://enricorossi.org/blog/">blog</a>/ 

<a href="http://enricorossi.org/">2012</a>/ 

</span>
<span class="title">
python bottle and ajax

</span>
</span>

</div>







</div>



<div id="pagebody">

<div id="content">
<p>This is just a little tips to demonstrate how to use the python <a href="http://bottlepy.org/" title="Bottle">bottle</a>
micro framework to render a page template which send a <a href="http://www.w3schools.com/js" title="Javascript">js</a> async request
(<a href="http://www.w3schools.com/ajax" title="Ajax">ajax</a>), get the result in a <a href="http://json.org/" title="JSon">json</a> form and display it.</p>

<p>First create this bottle main file, for example main.py, this will
respond onto localhost:8080 as described in the bottle manual.</p>

<p>The first route 'localhost:8080/' will render the template json.tpl file
which will see later, the second route 'localhost:8080/getallitems'
will send to the browser the <a href="http://json.org/" title="JSon">json</a> converted dictionary.</p>

<div class="highlight-python"><pre class="hl"><span class="hl slc">#!/usr/bin/env python</span>

<span class="hl kwa">from</span> bottle <span class="hl kwa">import</span> route<span class="hl opt">,</span> run<span class="hl opt">,</span> template<span class="hl opt">,</span> get<span class="hl opt">,</span> debug

<span class="hl kwd">debug</span><span class="hl opt">(</span><span class="hl kwa">True</span><span class="hl opt">)</span>

<span class="hl slc"># this will be the dictionary returned by the ajax call.</span>
<span class="hl slc"># Bottle convert this in a json compatibile string.</span>

items <span class="hl opt">= {</span><span class="hl num">1</span><span class="hl opt">:</span> <span class="hl str">'first item'</span><span class="hl opt">,</span> <span class="hl num">2</span><span class="hl opt">:</span> <span class="hl str">'second item'</span><span class="hl opt">}</span>

<span class="hl slc"># a simple json test main page</span>
<span class="hl kwb">@route</span><span class="hl opt">(</span><span class="hl str">'/'</span><span class="hl opt">)</span>
<span class="hl kwa">def</span> <span class="hl kwd">jsontest</span><span class="hl opt">():</span>
    <span class="hl kwa">return</span> <span class="hl kwd">template</span><span class="hl opt">(</span><span class="hl str">'json'</span><span class="hl opt">)</span>

<span class="hl kwb">@route</span><span class="hl opt">(</span><span class="hl str">'/getallitems.json'</span><span class="hl opt">)</span>
<span class="hl kwa">def</span> <span class="hl kwd">shop_aj_getallitems</span><span class="hl opt">():</span>
    <span class="hl kwa">return</span> <span class="hl opt">(</span>items<span class="hl opt">)</span>

<span class="hl kwd">run</span><span class="hl opt">(</span>host<span class="hl opt">=</span><span class="hl str">'localhost'</span><span class="hl opt">,</span> port<span class="hl opt">=</span><span class="hl num">8080</span><span class="hl opt">)</span>

<span class="hl slc"># vim: tabstop=8 expandtab shiftwidth=4 softtabstop=4</span>
</pre></div>


<p>The json.tpl template file looks like this:</p>

<div class="highlight-js"><pre class="hl"><span class="hl opt">&lt;</span>html<span class="hl opt">&gt;</span>
<span class="hl opt">&lt;</span>head<span class="hl opt">&gt;</span>
<span class="hl opt">&lt;</span>meta http<span class="hl opt">-</span>equiv<span class="hl opt">=</span><span class="hl str">"Content-Type"</span> content<span class="hl opt">=</span><span class="hl str">"text/html; charset=UTF-8"</span> <span class="hl opt">/&gt;</span>

<span class="hl opt">&lt;</span>script type<span class="hl opt">=</span><span class="hl str">"text/javascript"</span><span class="hl opt">&gt;</span>
<span class="hl kwa">var</span> xmlhttp<span class="hl opt">;</span>

<span class="hl slc">// Are we using a modern browser or ...</span>
<span class="hl kwa">if</span> <span class="hl opt">(</span>window<span class="hl opt">.</span>XMLHttpRequest<span class="hl opt">) {</span>
  <span class="hl slc">// code for IE7+, Firefox, Chrome, Opera, Safari</span>
  xmlhttp<span class="hl opt">=</span><span class="hl kwa">new</span> <span class="hl kwd">XMLHttpRequest</span><span class="hl opt">();</span>
<span class="hl opt">}</span> <span class="hl kwa">else</span> <span class="hl opt">{</span>
  <span class="hl slc">// code for IE6, IE5</span>
  xmlhttp<span class="hl opt">=</span><span class="hl kwa">new</span> <span class="hl kwd">ActiveXObject</span><span class="hl opt">(</span><span class="hl str">"Microsoft.XMLHTTP"</span><span class="hl opt">);</span>
<span class="hl opt">}</span>

<span class="hl slc">// This will render the two output which substitute the</span>
<span class="hl slc">// elements id="raw" and id="forin"</span>
<span class="hl kwa">function</span> <span class="hl kwd">GetItems</span><span class="hl opt">()</span>
<span class="hl opt">{</span>
  <span class="hl kwa">if</span> <span class="hl opt">(</span>xmlhttp<span class="hl opt">.</span>readyState<span class="hl opt">==</span><span class="hl num">4</span> <span class="hl opt">&amp;&amp;</span> xmlhttp<span class="hl opt">.</span>status<span class="hl opt">==</span><span class="hl num">200</span><span class="hl opt">) {</span>
    <span class="hl slc">// var jsonobj = eval ("(" + xmlhttp.responseText + ")"); </span>
    <span class="hl kwa">var</span> jsonobj <span class="hl opt">=</span> JSON<span class="hl opt">.</span><span class="hl kwd">parse</span><span class="hl opt">(</span>xmlhttp<span class="hl opt">.</span>responseText<span class="hl opt">);</span> 

    <span class="hl kwa">var</span> output <span class="hl opt">=</span> xmlhttp<span class="hl opt">.</span>responseText<span class="hl opt">;</span>
    document<span class="hl opt">.</span><span class="hl kwd">getElementById</span><span class="hl opt">(</span><span class="hl str">"raw"</span><span class="hl opt">).</span>innerHTML <span class="hl opt">=</span> output<span class="hl opt">;</span>

    output <span class="hl opt">=</span> <span class="hl str">""</span><span class="hl opt">;</span>

    <span class="hl kwa">for</span> <span class="hl opt">(</span>i <span class="hl kwa">in</span> jsonobj<span class="hl opt">) {</span>
      output <span class="hl opt">+=</span> <span class="hl str">'&lt;p&gt;'</span><span class="hl opt">;</span>
      output <span class="hl opt">+=</span> i <span class="hl opt">+</span> <span class="hl str">" : "</span> <span class="hl opt">+</span> jsonobj<span class="hl kwc">[i]</span><span class="hl opt">;</span>
      output <span class="hl opt">+=</span> <span class="hl str">'&lt;/p&gt;'</span><span class="hl opt">;</span>
    <span class="hl opt">}</span>

    document<span class="hl opt">.</span><span class="hl kwd">getElementById</span><span class="hl opt">(</span><span class="hl str">"forin"</span><span class="hl opt">).</span>innerHTML <span class="hl opt">=</span> output<span class="hl opt">;</span>

  <span class="hl opt">}</span> <span class="hl kwa">else</span> <span class="hl opt">{</span>
    <span class="hl kwd">alert</span><span class="hl opt">(</span><span class="hl str">"data not available"</span><span class="hl opt">);</span>
  <span class="hl opt">}</span>
<span class="hl opt">}</span>

<span class="hl slc">// xmlhttp.onreadystatechange = GetArticles;</span>
<span class="hl slc">// the GetItems function will be triggered once the ajax</span>
<span class="hl slc">// request is terminated.</span>
xmlhttp<span class="hl opt">.</span>onload <span class="hl opt">=</span> GetItems<span class="hl opt">;</span>

<span class="hl slc">// send the request in an async way</span>
xmlhttp<span class="hl opt">.</span><span class="hl kwd">open</span><span class="hl opt">(</span><span class="hl str">"GET"</span><span class="hl opt">,</span> <span class="hl str">"/getallitems.json"</span><span class="hl opt">,</span> <span class="hl kwa">true</span><span class="hl opt">);</span>
xmlhttp<span class="hl opt">.</span><span class="hl kwd">send</span><span class="hl opt">();</span>
<span class="hl opt">&lt;/</span>script<span class="hl opt">&gt;</span>
<span class="hl opt">&lt;/</span>head<span class="hl opt">&gt;</span>

<span class="hl opt">&lt;</span>body<span class="hl opt">&gt;</span>
  <span class="hl opt">&lt;</span>p<span class="hl opt">&gt;</span>The raw result from the ajax json request is<span class="hl opt">:&lt;/</span>p<span class="hl opt">&gt;</span>
  <span class="hl opt">&lt;</span>div id<span class="hl opt">=</span><span class="hl str">"raw"</span><span class="hl opt">&gt;&lt;/</span>div<span class="hl opt">&gt;</span>
  <span class="hl opt">&lt;</span>br <span class="hl opt">/&gt;</span>
  <span class="hl opt">&lt;</span>p<span class="hl opt">&gt;</span>The <span class="hl kwa">for</span> cycle produces <span class="hl opt">:&lt;/</span>p<span class="hl opt">&gt;</span>
  <span class="hl opt">&lt;</span>div id<span class="hl opt">=</span><span class="hl str">"forin"</span><span class="hl opt">&gt;&lt;/</span>div<span class="hl opt">&gt;</span>
<span class="hl opt">&lt;/</span>body<span class="hl opt">&gt;</span>
<span class="hl opt">&lt;/</span>html<span class="hl opt">&gt;</span>
</pre></div>


<p>Run the program with:</p>

<pre><code>python main.py
</code></pre>

<p>open the URL on http://localhost:8080</p>

<pre><code>The raw result from the ajax json request is:
{"1": "first item", "2": "second item"}

The for cycle produces :
1 : first item
2 : second item
</code></pre>

<p style="font-style: italic;">
<a href="mailto:e.rossi@tecnobrain.com?subject=Comment%20to%20blog/2012/python_bottle_and_ajax">
-&gt; Add a comment.
</a>
</p>




</div>





</div>

<div id="footer" class="pagefooter">

<div id="pageinfo">




<div class="tags">
Tags:

<a href="http://enricorossi.org/tags/bottle/" rel="tag">bottle</a>

<a href="http://enricorossi.org/tags/howto/" rel="tag">howto</a>

<a href="http://enricorossi.org/tags/python/" rel="tag">python</a>

<a href="http://enricorossi.org/tags/software/" rel="tag">software</a>

<a href="http://enricorossi.org/tags/tips/" rel="tag">tips</a>

</div>







<div class="pagelicense">
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">
<img alt="Creative Commons License" style="border-width:0" src="./python bottle and ajax_files/80x15.png">
</a>
<a href="http://ikiwiki.info/">
<img alt="Ikiwiki" style="border-width: 0" src="./python bottle and ajax_files/ikiwiki_button.png">
</a>
&nbsp;
<a href="http://debian.org/">
<img alt="Debian" style="border-width: 0" src="./python bottle and ajax_files/debian_button-mini.png">
</a>
&nbsp;
<a href="http://validator.w3.org/check?uri=referer">
<img style="border:0" src="./python bottle and ajax_files/button-xhtml.png" alt="Valid XHTML 1.0 Strict">
</a>
&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0" src="./python bottle and ajax_files/button-css.png" alt="CSS Valido!">
</a>
&nbsp;
<a href="http://enricorossi.org/index.rss">
<img style="border:0" src="./python bottle and ajax_files/button-rss.png" alt="RSS Feed">
</a>
<br>
©Enrico Rossi - This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>

</div>


<div class="pagedate">
Last edited <span class="date">Sat 09 Mar 2013 11:00:13 PM CET</span>
<!-- Created <span class="date">Sat 21 Jan 2012 04:42:00 PM CET</span> -->
</div>

</div>


<!-- from enricorossi.org -->
</div>

</div>



</body></html>